﻿
@{ 
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="~/Content/Css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="~/Content/Css/animate.css" rel="stylesheet">
    <link href="~/Content/Css/style.css?v=4.1.0" rel="stylesheet">
    <link href="~/Content/Css/plugins/multiselect/bootstrap-multiselect.css" rel="stylesheet" />
    <style>
        .ibox {
            margin-bottom: 0px;
        }

        .ibox-content {
            padding: 15px 20px 0px 20px;
        }

        .multiselect-container input[type="checkbox"] {
            margin-top: 7px;
        }
        #RoleIDLaber { 
            padding: 8px 0 0 0;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight" style="padding:10px;">
        <div class="ibox float-e-margins">
            @*<div class="ibox-title">
            <h5>费用列表</h5>
        </div>*@
             
            <div class="panel panel-default" style="margin-top:10px;margin-bottom:10px;">
                <div class="panel-heading">
                    <strong>查询条件</strong>
                </div>
                <div class="panel-body">
                    <div class="pull-left" style="width:200px;">
                        <div class="col-xs-3" style="padding:6px 0 0 0;">角色：</div>
                        <div class="col-xs-9" style="padding:0 0 0 0;">
                            <select id="RoleID" class="form-control input-sm" name="RoleID">
                                <option value='0'>全部</option>
                                <option value='1'>管理员</option>
                                <option value='2'>业务员</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>



            <div class="ibox-content" style="padding:15px;">
                <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
                    @if (ViewBag.RoleId == 1)
                    {
                        <button id="insertBtn" type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                        </button>
                        <button id="editBtn" type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
                        </button>
                        <button id="deleteBtn" type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                        </button>
                        <button id="refreshBtn" type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                        </button>
                    }
                    @if (ViewBag.RoleId == 2)
                    {
                        <button id="refreshBtn" type="button" class="btn btn-outline btn-default">
                            <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                        </button>
                    }

                </div>
                <table id="table" data-mobile-responsive="true"></table>
            </div>
        </div>
        @* 用来传递消息的隐藏域 *@
    </div>



    <!-- 全局js -->
    <script type="text/javascript" src="~/Scripts/jquery.min.js?v=2.1.4"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script type="text/javascript" src="~/Scripts/content.js?v=1.0.0"></script>
    <!-- Bootstrap table -->
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="~/Scripts/plugins/bootstrap-table/extensions/export/tableExport.jquery.plugin-master/tableExport.js"></script>
    @*<script src="~/Scripts/plugins/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>*@
    <script type="text/javascript" src="~/Scripts/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- layer javascript -->
    <script type="text/javascript" src="~/Scripts/plugins/layer/layer.min.js"></script>
    <script src="~/Scripts/plugins/layer/laydate/laydate.js"></script>
    <script src="~/Scripts/TimeObjectUtil.js"></script>
    <script src="~/Scripts/plugins/multiselect/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
        $(function () {
            initTable();
        });

        var $table = $('#table');
        function initTable() {
            $table.bootstrapTable({
                url: '/Staffs/IndexAsync',            //数据来源地址
                method: 'post',                     //数据请求方式
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否启用分页
                sidePagination: 'server',           //在服务器端分页
                queryParams: queryParams,           //传递参数
                pageNumber: 1,                      //初始化加载第一页，默认第一页
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [10, 20, 30, 40, 50],     //可供选择的每页的行数（*）
                clickToSelect: true,                //是否启用点击选中行
                //toolbar: "#tableToolBar",
                height: getHeight(),
                search: true,
                showRefresh: true,
                showColumns: true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                exportTypes: ['excel'],
                exportOptions: { fileName: '123' },
                toolbar: '#exampleToolbar',
                iconSize: 'outline',
                icons: {
                    refresh: 'glyphicon-repeat',
                    columns: 'glyphicon-list'
                },
                toolbar: '#exampleToolbar',
                columns: [{
                    width: 38,
                    field: 'aaaaaaa',
                    checkbox: true,
                }, {
                    title: '编号',
                    align: 'center',
                    field: 'ID',
                    width: 100
                }, {
                    field: 'Name',
                    title: '姓名',
                    align: 'center'
                }, {
                    field: 'LoginName',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'LoginPass',
                    title: '密码',
                    align: 'center'
                }, {
                    field: 'RoleID',
                    title: '角色',
                    align: 'center',
                    formatter: RoleIDFormatter
                }, {
                    field: 'QQ1',
                    title: 'QQ1',
                    align: 'center'
                }, {
                    field: 'QQ2',
                    title: 'QQ2',
                    align: 'center'
                }, {
                    field: 'QQ3',
                    title: 'QQ3',
                    align: 'center'
                }, {
                    field: 'WeiXin1',
                    title: '微信1',
                    align: 'center',
                }, {
                    field: 'WeiXin2',
                    title: '微信2',
                    align: 'center'
                }, {
                    field: 'WeiXin3',
                    title: '微信3',
                    align: 'center'
                }
                ]
            });
        }

        //查询的参数
        var queryParams = function (params) {
            var temp = {
                pageSize: params.limit,                             //行数
                pageIndex: (params.offset / params.limit) + 1,      //页码
                RoleID: $('#RoleID').val(),
                Name: params.search,
            };
            console.log(temp);
            console.log(params);
            return temp;
        };

        //获取表格高度
        function getHeight() {
            return $(window).height() - 180;
        }

        //刷新表格数据
        var refreshTable = function () {
            $table.bootstrapTable("refresh");
        }

        //刷新按钮
        $("#refreshBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });

        //搜索按钮
        $("#searchBtn").click(function (e) {
            $table.bootstrapTable("refresh");
        });

        //角色
        function RoleIDFormatter(value, row, index) {
            var roleName = "";
            if (value == 1) {
                roleName = "管理员";
            }
            if (value == 2) {
                roleName = "业务员";
            }
            return roleName;
        }

        //插入按钮
        $("#insertBtn").click(function (e) {
            parent.layer.open({
                type: 2,
                title: "添加角色",
                shadeClose: false,
                shade: 0.4,
                area: ["850px", "460px"],
                content: "/Staffs/Insert",
                end: function () {
                    refreshTable();
                }
            });
        });

        //编辑按钮
        $("#editBtn").click(function (e) {
            var selected = $table.bootstrapTable("getSelections");

            if (selected.length > 1) {
                layer.msg("一次只能修改一条数据！", { icon: 5, time: 2000 });
                return;
            }

            if (selected.length == 0) {
                layer.msg("请选择您要修改的数据！", { icon: 5, time: 2000 });
                return;
            }
            editData(selected[0].ID);
        });

        //打开编辑窗口
        function editData(id) {
            parent.layer.open({
                type: 2,
                title: "修改角色",
                shadeClose: false,
                shade: 0.4,
                area: ["850px", "460px"],
                content: "/Staffs/Edit?id=" + id,
                end: function () {
                    refreshTable();
                }
            });
        }

        //删除按钮
        $("#deleteBtn").click(function (e) {
            var selected = $table.bootstrapTable("getSelections");
            if (selected.length == 0) {
                layer.msg("请选择您要删除的数据！", { icon: 5, time: 2000 });
                return;
            }

            var arr = [];
            for (var i = 0; i < selected.length; i++) {
                arr.push(selected[i].ID);
            }

            var ids = arr.join(",");
            DeletedData(ids)
        });
        function DeletedData(ids) {
            layer.confirm("您确定要删除所选数据吗", {
                btn: ["是的", "取消"] //按钮
            }, function () {
                $.ajax({
                    url: "/Staffs/DeleteAsync",
                    type: "post",
                    dataType: "json",
                    data: { ids: ids },
                    success: function (data) {
                        //Info,Success,Warning,Error
                        var type = data.type;
                        if (type == 1) {
                            layer.msg(data.content,
                                {
                                    icon: 6, time: 2000
                                },
                                function () {
                                    refreshTable();
                                });
                        } else {
                            layer.msg(data.content, { icon: 5, time: 2000 });
                        }
                    }
                });
            }, function () {
                return;
            });
        }

    </script>
</body>
</html>
